<template>
  <div class="fire-damage-management-wrap">
    <div class="content-item fire-damage-management">
      <div class="content-item-title">隐患整改</div>
      <div class="content-item-wrap">
        <div class="chart-wrap">
          <div class="map-wrap">
            <div id="fireDistributedMap" style="width:520px;height: 340px;"></div>
          </div>
          <div class="piechart-wrap">
            <div class="piechart-intro">
              <h3>
                <i class="triangle-icon"></i>隐患单位分布
              </h3>
              <template v-for="(item, index) in pieData">
                <p v-if="index < 3" :key="item.orgId">
                  {{item.orgName}}
                  <span class="value">{{(toDecimal2NoZero(item.currentNum*100/statistics.totalNum))}}%</span>
                </p>
              </template>
            </div>
            <div id="fireDamagePiechart" :style="{width: '240px', height: '100px'}"></div>
          </div>
        </div>
        <div class="fire-detail-wrap">
          <div class="fire-statistics">
            <div class="fire-statistics-item">
              <p class="statistics-title">隐患总数</p>
              <p class="statistics-value">{{statistics.totalNum}}</p>
            </div>
            <div class="fire-statistics-item">
              <p class="statistics-title">较大隐患</p>
              <p class="statistics-value">{{statistics.gradeOverNum}}</p>
            </div>
            <div class="fire-statistics-item">
              <p class="statistics-title">今日新增</p>
              <p class="statistics-value">{{statistics.todayNum}}</p>
            </div>
          </div>
          <div class="fire-news-wrap">
            <h3>
              <i class="triangle-icon"></i>较大级别及以上隐患
            </h3>
            <el-carousel
              height="305px"
              arrow="hover"
              indicator-position="none"
              :class="{'one-carousel-item': fireDamageList && fireDamageList.length == 1}"
              :interval="5000"
            >
              <el-carousel-item v-for="item in fireDamageList" :key="item.id">
                <div class="news-detail">
                  <p class="news-title">标签</p>
                  <div class="news-content">
                    <span v-if="mapStatus(item.status)">{{mapStatus(item.status)}}</span>
                    <span v-if="item.gradeName">{{item.gradeName}}</span>
                    <span v-if="item.categoryName">{{item.categoryName}}</span>
                    <span v-if="item.orgName">{{item.orgName}}</span>
                    <span v-if="item.continueTime">持续{{item.continueTime}}</span>
                  </div>
                  <p class="news-title">隐患描述</p>
                  <div class="news-content">
                    <p>{{item.hiddenDangerDesc}}</p>
                  </div>
                  <div class="pic-wrap">
                    <el-image
                      v-for="(srcItem, i) in item.picUrls.split(',')"
                      :key="i"
                      :src="srcItem"
                      @click="$imgViewer"
                      :data-imgpreview="item.picUrls"
                      fit="cover"
                      :data-imgpreviewindex="i"
                    ></el-image>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BMap from 'BMap'
import geoJson from '@/libs/echartsMap/cityTown/合肥市.json'
import { getHiddenNewStatisticsByOrgIds, getHiddenDangerList } from '@/api/home'

var map
export default {
  name: 'FireDamageManagement',
  data() {
    return {
      pieData: [],
      statistics: {},
      fireDamageList: [],
      orgIds: this.$store.state.userinfo.organizationIds,
    }
  },
  created() {
    this.getFireDamageManagementData()
  },
  methods: {
    getFireDamageManagementData() {
      let that = this
      let params1 = {
        account: that.$store.state.userinfo.accountName,
        orgIds: that.orgIds,
      }
      let params2 = {
        orgIds: that.$store.state.userinfo.organizationIds,
        timeType: 2, // 时间查询类型(1:今天、2:时间段)
        status: 4, // 整改状态(1:整改中、2:已完成 3:核实中，4:未完成，包含1、3)
        gradeId: 2, // 隐患等级
        isOverGrade: 1, // 1表示查询指定隐患等级之上，0表示不实用此参数
        queryType: 0,
      }
      getHiddenNewStatisticsByOrgIds(params1).then((res) => {
        if (res.status === 200) {
          that.statistics = res.data.statistics || {
            totalNum: 0,
            gradeOverNum: 0,
            todayNum: 0,
          }
          that.pieData = res.data.orgHidden
          that.initEcharts(res.data.orgHidden)
          that.initBMap(res.data.orgHidden)
          // that.initEchartsMap(res.data.orgHidden)
        }
      })
      getHiddenDangerList(params2).then((res) => {
        that.fireDamageList = res.data
      })
    },
    toDecimal2NoZero(x) {
      let f = Math.round(x * 100) / 100
      let s = f.toString()
      return s
    },
    mapStatus(value) {
      let mapList = {
        1: '整改中',
        2: '已完成',
        3: '核实中',
        5: '待指派',
      }
      return mapList[value]
    },
    initEcharts(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById('fireDamagePiechart')
      )
      let arr = data
      let newArr = []
      for (var i = 0, len = arr.length; i < len; i++) {
        newArr.push({
          value: arr[i].currentNum,
          name: arr[i].orgName,
          id: arr[i].orgId,
        })
      }
      // 绘制图表
      myChart.setOption({
        // color: ['#2876D1', '#D84553'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        series: [
          {
            name: '隐患单位分布',
            type: 'pie',
            radius: ['0', '80%'],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: newArr,
          },
        ],
      })
    },
    initBMap(res) {
      let that = this
      var geoc = new BMap.Geocoder()
      let location = that.$store.state.userinfo.org.mapLocation
        ? JSON.parse(that.$store.state.userinfo.org.mapLocation)
        : {}
      var top_right_navigation = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_SMALL,
      })
      // mapLocation: "{"lon":"117.201048","lat":"31.826473","zoom":12}"
      //选取经纬度
      map = new BMap.Map('fireDistributedMap')
      // map.enableScrollWheelZoom() // 允许缩放
      map.clearOverlays() // 先清除地图上的点
      map.enableKeyboard() // 启用键盘上下左右键移动地图
      map.addControl(top_right_navigation)

      //经纬度画线
      if (location.lon && location.lat) {
        var new_point = new BMap.Point(location.lon, location.lat)
        map.centerAndZoom(new_point, location.zoom)
        if (res) {
          var imgred =
            ''
          var myIcon = new BMap.Icon(imgred, new BMap.Size(50, 50))
          // 地图打点
          for (var i = 0, len = res.length; i < len; i++) {
            let pt = new BMap.Point(res[i].longitude, res[i].latitude)
            let marker = new BMap.Marker(pt, { icon: myIcon }) // 创建标注
            let tipStr = `<div><div style="font-weight:bold;">${res[i].orgName}</div><div>隐患数：${res[i].currentNum}</div></div>`
            var label = new BMap.Label(tipStr, {
              offset: new BMap.Size(-20, -40),
            })
            label.setStyle({
              width: 'auto',
              /* height:'auto', */
              /* color: '#fff', */
              fontSize: '13px',
              backgroundColor: 'rgb(255, 255, 255)',
              border: 'none',
              borderRadius: '4px',
              textAlign: 'left',
              padding: '5px',
              boxShadow: '1px 2px 1px rgba(0,0,0,.15)',
              /*lineHeight: "15px" */
            })
            // 添加标记点文本
            marker.setLabel(label)
            // 将标注添加到地图中
            map.addOverlay(marker)
            map.centerAndZoom(pt, location.zoom)
          }
        }
      } else {
        var position = new BMap.Point(116.331398, 39.897445)
        map.centerAndZoom(position, 16)
      }
    },
    initEchartsMap(res) {
      var imgred =
        ''
      let mapChart = this.$echarts.init(
        document.getElementById('fireDistributedMap')
      )
      //var uploadedDataURL = "/libs/echartsMap/cityTown/合肥市.json";
      mapChart.showLoading()
      // $.getJSON(uploadedDataURL, function(geoJson) {
      this.$echarts.registerMap('maps', geoJson)
      mapChart.hideLoading()
      var geoCoordMap = {
        业主单位: [117.201048, 31.826473],
      }
      var data = res
      var max = 480,
        min = 9 // todo
      var maxSize4Pin = 100,
        minSize4Pin = 20

      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].orgName]
          if (geoCoord) {
            res.push({
              name: data[i].orgName,
              value: geoCoord.concat(data[i].currentNum),
              symbol: data[i].symbol,
            })
          }
        }
        return res
      }

      var option = {
        geo: {
          show: true,
          map: 'maps',
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#78aae6',
              borderColor: '#205fa9',
            },
            emphasis: {
              areaColor: '#68a0e2',
            },
          },
        },
        tooltip: {
          show: true,
          enterable: 'true',
          padding: 0,
          hideDelay: 10000,
          formatter: function (e) {
            var ht =
              '<p style="padding: 10px;">' +
              e.name +
              '<span style="margin-left:10px;">100%</span><br/> ' +
              '隐患<span style="margin-left:10px;">' +
              e.value[2] +
              '</span>' +
              '</p>'
            return ht
          },
        },
        series: [
          {
            type: 'scatter',
            name: '隐患位置',
            coordinateSystem: 'geo',
            z: 18,
            symbol: 'image://' + imgred,
            data: convertData(data),
            symbolSize: 15,
            symbolKeepAspect: true,
            itemStyle: {
              opacity: 1,
            },
          },
        ],
      }
      mapChart.setOption(option)
      // });
    },
    // 更新/刷新模块
    refreshModel(data) {
      let that = this

      that.getFireDamageManagementData()
    },
  },
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss">
.fire-damage-management-wrap {
  .fire-damage-management {
    margin-left: 20px;
    width: 730px;
  }
  .fire-damage-management h3 {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #2876d1;
    line-height: 30px;
  }
  .fire-damage-management .triangle-icon {
    display: block;
    margin-right: 5px;
    width: 0;
    height: 0;
    border-width: 8px 0 8px 13px;
    border-style: solid;
    border-color: transparent transparent transparent #2876d1;
  }
  .fire-damage-management .content-item-wrap {
    display: flex;
    margin-top: 20px;
    border: 1px solid rgba(189, 189, 189, 0.6);
    padding: 20px 0 20px 20px;
    height: 500px;
    width: 930px;
  }
  .fire-damage-management .chart-wrap {
    width: 520px;
  }
  .fire-damage-management .chart-wrap .map-wrap {
    width: 520px;
    height: 340px;
  }
  .fire-damage-management .chart-wrap .piechart-wrap {
    display: flex;
    padding: 10px 30px;
    height: 120px;
    background-color: #f3f7f9;
  }
  .fire-damage-management .piechart-wrap .piechart-intro {
    width: 280px;
  }
  .fire-damage-management .piechart-wrap .piechart-intro h3 {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: -19px;
  }
  .fire-damage-management .piechart-wrap .piechart-intro p {
    color: #666;
    line-height: 24px;
  }
  .fire-damage-management .piechart-wrap .piechart-intro span {
    margin-left: 10px;
  }
}
.fire-detail-wrap {
  width: 390px;
  border-left: 1px solid #ebebeb;
}
.fire-detail-wrap .fire-statistics {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ebebeb;
}
.fire-detail-wrap .fire-statistics-item {
  width: 90px;
  text-align: center;
}
.fire-detail-wrap .statistics-title {
  color: #999;
  font-size: 16px;
  line-height: 30px;
}
.fire-detail-wrap .statistics-value {
  color: #205fa9;
  font-size: 30px;
  line-height: 70px;
}
.fire-detail-wrap .fire-news-wrap {
  position: relative;
  padding: 0 10px 0 10px;
  height: 360px;
}
.fire-detail-wrap .fire-news-wrap h3 {
  line-height: 36px;
}
.fire-detail-wrap .fire-news-wrap .news-detail {
  margin-top: -10px;
}
.fire-detail-wrap .fire-news-wrap .news-title {
  margin-top: 20px;
  font-weight: bold;
  font-size: 16px;
  color: #205fa9;
}
.fire-detail-wrap .fire-news-wrap .news-content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  color: #666;
}
.fire-detail-wrap .fire-news-wrap .news-content p {
  max-height: 85px;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fire-detail-wrap .fire-news-wrap .news-content span {
  margin: 2px 3px;
  padding: 3px 7px;
  background-color: #e9f1fa;
}
.fire-detail-wrap .fire-news-wrap .pic-wrap {
  margin-top: 10px;
}
.fire-detail-wrap .fire-news-wrap .pic-wrap .el-image {
  height: 100px;
  width: 100px;
  margin-right: 10px;
}
.fire-detail-wrap .fire-news-wrap .el-carousel__arrow--left,
.fire-detail-wrap .fire-news-wrap .el-carousel__arrow--right {
  background-color: #ccc;
}
.fire-detail-wrap .fire-news-wrap .el-carousel__arrow--left:hover,
.fire-detail-wrap .fire-news-wrap .el-carousel__arrow--right:hover {
  background-color: #666;
}

/* 重写分页样式 */
.fire-detail-wrap .fire-news-wrap .el-carousel {
  position: initial;
}
.fire-detail-wrap .fire-news-wrap .el-carousel .el-carousel__item {
  overflow-y: auto;
}
.fire-detail-wrap .fire-news-wrap .el-carousel__indicators {
  display: flex;
  flex-direction: column;
  left: 377px;
  top: 0;
  padding-top: 50px;
  width: 30px;
  background-color: #f3f7f9;
  overflow: auto;
}
.fire-detail-wrap .fire-news-wrap .el-carousel__button {
  margin: 0 auto;
  width: 10px;
  height: 10px;
  border: 1px solid #bdbdbd;
  border-radius: 50%;
}
.fire-detail-wrap
  .fire-news-wrap
  .el-carousel__indicator.is-active
  .el-carousel__button {
  background-color: #2876d1;
  border-color: #2876d1;
}
</style>
